{% extends 'new-layout/layout.html' %}
{% import 'libs/libs.html' as libs %}
{% import 'libs/const.html' as const %}

{% block title_nav %}
<li><a href="/user/">用户管理</a></li>
{% endblock %}

{% block search_body %}
{% 
    set form_config = [
        {'label':'uid', 'name':'uid',},
        {'label':'审核状态', 'name':'status', 'type':'select', 'options':[
                {'name':'请选择……', 'value':'0'},
                {'name':'申请中', 'value':'1'},
                {'name':'审核通过', 'value':'2'},
                {'name':'拒绝通过', 'value':'3'},
            ] 
        },
    ] 
%}
{{ libs.build_search_form(form_config) }}

{% endblock %}

{% block data_body %}
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>uid</th>
                <th>申请时间</th>
                <th>图片</th>
                <th class="col-lg-3">证书类型</th>
                <th>审核人</th>
                <th>审核时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        {% for img in img_list %}
            <tr>
                <td><a href="{{ url_for('user.detail', uid=img.uid) }}">{{ img.uid }}</a></td>
                <td>{{ img.add_time|format_timestamp }}</td>
                <td><a style="width:50px;" target="_blank" href="{{ img.img_original }}"><img src="{{ img.img_original }}@100Q_50w"></img></a></td>
                <td>{{ img.cat_name }}</td>
                <td>{{ img.cherker }}</td>
                <td>{{ img.check_time|format_timestamp }}</td>
                <td>
                {% if img.status in (2,3) %}
                    {{ const.REALNAME_STATUS.get(img.status, 0) }}
                {% else %}
                    <a href="javascript:;" onclick="apply(this, {{ img.id }}, 2);" class="btn btn-sm btn-primary">审核通过</a>
                    <a href="javascript:;" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#img-modal" data-id="{{ img.id }}">拒绝通过</a>
                {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    {{ libs.pagination_html(pagination) }}

</div>
{% endblock %}

{% block footer %}
<div class="modal fade" id="img-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">资质审核</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label class="control-label">拒绝原因：</label>
                        <div class="controls">
                            <textarea name="desc" class="col-lg-12" id="reject_desc"></textarea>
                        </div>
                    </div>
                    <input type="hidden" id="img_id" value="">
                    <input type="hidden" id="reject_status" value="">
                </form>
            </div>
            <div class="modal-footer" style="margin-top: 20px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger" onclick="javascript:reject();">拒绝通过</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/set-of-styles/default/js/modal.js"></script>
<script type="text/javascript">
function apply(adom, id, status) {
    $.get('/user/cert/check', {'id':id, 'status':status}, function(data) {
        if (data != 'ok') {
            alert(data);
            return;
        }

        var $a = $(adom);
        var $parent_td = $a.parent();
        var icon = 'fa-check';
        if (status == 3) {
            icon = 'fa-times';
        }

        $parent_td.html('<i class="fa ' + icon + '" style="color:red; font-size:24px;"></i>');

    });
}

// 显示 img-modal
$("#img-modal").on("show.bs.modal", function (e) {
    var $invoker = $(e.relatedTarget);
    var data_id = $invoker.attr('data-id');
    $('#img_id').val(data_id);
    $('#reject_status').val('');
});

// 隐藏 realname-modal
$('#img-modal').on('hide.bs.modal',  function (e) {
    var reject_status = $('#reject_status').val();
    if (reject_status == '3') {
        var apply_id = $('#img_id').val();
        var $a = $('a[data-id="' + apply_id + '"]');
        var $parent_td = $a.parent();
        $parent_td.html('<i class="fa fa-times" style="color:red; font-size:24px;"></i>');
    } 

});

// 拒绝通过
function reject() {
    var reject_desc = $('#reject_desc').val();
    var img_id = $('#img_id').val();

    $.get('/user/cert/check', {'id':img_id, 'reject_desc':reject_desc, 'status':'3'}, function(data) {
        if (data != 'ok') {
            alert(data);
            return;
        }

    });

    $('#reject_status').val('3');
    $('#img-modal').modal('hide');

}
</script>
{% endblock %}
